import React, { useEffect } from 'react'
import { Button, Form, Input, Card, Space, Table, Tag } from 'antd'
import { SearchOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons'
import type { ColumnsType } from 'antd/es/table'

// 引入发送请求的函数
import { reqGetHospitalSets } from '@api/hospital/hospitalSet'

interface DataType {
  key: string
  name: string
  age: number
  address: string
  tags: string[]
}

// columns数组中有多少个对象,表格就有多少列
const columns: ColumnsType<DataType> = [
  {
    title: '序号', // 设置表头
    // 如果只写了dataIndex.不写render. 则dataIndex决定了这一列渲染dataSource数据中的哪个字段
    // 如果既写了dataIndex.又写了render.则渲染由render决定.render函数接收的第一个参数又dataIndex决定
    // 如果不写dataIndex,则render第一个参数就是dataSource的数据
    // dataIndex: 'name',
    // key: 'name',
    // 如果有render,则render返回什么,当前列就渲染什么
    render: (text, records, index) => {
      // text由dataIndex决定
      // records 就是dataSource的数据
      // index 是数据的下标
      return index + 1
    },
    align: 'center', //让这一列的文本水平居中显示
    width: 80,
  },
  {
    title: '医院名称',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: '医院编号',
    dataIndex: 'address',
    key: 'address',
  },
  {
    title: 'api基础路径',
    key: 'tags',
    dataIndex: 'tags',
    render: (_, { tags }) => (
      <>
        {tags.map((tag) => {
          let color = tag.length > 5 ? 'geekblue' : 'green'
          if (tag === 'loser') {
            color = 'volcano'
          }
          return (
            <Tag color={color} key={tag}>
              {tag.toUpperCase()}
            </Tag>
          )
        })}
      </>
    ),
  },
  {
    title: '签名',
    dataIndex: 'address',
    key: 'address',
  },
  {
    title: '联系人名称',
    dataIndex: 'address',
    key: 'address',
  },
  {
    title: '联系人手机号',
    dataIndex: 'address',
    key: 'address',
  },
  {
    title: '操作',
    key: 'action',
    render: (_, record) => (
      <>
        <Button
          type="primary"
          icon={<EditOutlined />}
          style={{ marginRight: 10 }}
        ></Button>
        <Button type="primary" danger icon={<DeleteOutlined />}></Button>
      </>
    ),
    fixed: 'right',
    width: 110,
  },
]

const data: DataType[] = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
    tags: ['nice', 'developer'],
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    address: 'London No. 1 Lake Park',
    tags: ['loser'],
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
    tags: ['cool', 'teacher'],
  },
]

export default function HospitalSet() {
  // 组件挂载获取医院设置表格数据
  // 注意: useEffect的回调函数,不能设置为异步函数
  useEffect(() => {
    async function fetch() {
      const result = await reqGetHospitalSets(1, 2)
      console.log(result)
    }
    fetch()
  }, [])

  const onFinish = (values: any) => {
    console.log('Success:', values)
  }

  //   const onFinishFailed = (errorInfo: any) => {
  //     console.log('Failed:', errorInfo)
  //   }
  return (
    <Card>
      <Form
        layout="inline" // 让表单中的所有表单元素在一行显示
        //   name="basic"
        //antd中也有栅格系统,一行分为24份
        //   labelCol={{span:8}} 表示每一个表单元素所对应的描述文本在一行中占8份
        //   labelCol={{ span: 8 }}
        // wrapperCol ={{span: 16 }}表示每一个表单元素在一行中占16份
        //   wrapperCol={{ span: 16 }}
        //   表单中的初始值.通过Form.Item的name属性的值设置
        //   initialValues={{ remember: false }}
        // 当点击表单的提交按钮, 表单校验通过,则触发onFinish,如果表单校验不通过则触发onFinishFailed
        onFinish={onFinish}
        //   onFinishFailed={onFinishFailed}
        //   autoComplete="off"
        style={{ marginBottom: 20 }}
      >
        <Form.Item
          // label="Username" // 设置当前表单元素的提示文本
          name="hosname" // 当前表单项的name.类似于html中表单元素的name
          // 当前表单项校验规则
          // required:true表示当前表单项必填. message是校验不通过时的提示文本
          // rules={[{ required: true, message: 'Please input your username!' }]}
        >
          <Input placeholder="医院名称" />
        </Form.Item>

        <Form.Item
          // label="Password"
          name="hoscode"
          // rules={[{ required: true, message: 'Please input your password!' }]}
        >
          <Input placeholder="医院编号" />
        </Form.Item>

        <Form.Item>
          {/* type="primary" 按钮为主题颜色 
        htmlType="submit" 有这个属性的Button.表示这个提交按钮
        */}
          <Button type="primary" htmlType="submit" icon={<SearchOutlined />}>
            查询
          </Button>
        </Form.Item>
        <Form.Item>
          <Button>清空</Button>
        </Form.Item>
      </Form>

      <Button type="primary" style={{ marginRight: 20 }}>
        添加
      </Button>
      <Button type="primary" danger disabled>
        批量删除
      </Button>
      {/* columns: 决定了表格中有多少列,并且每一列的标题是什么
          dataSource: 决定了表格中渲染的数据
          bordered 给表格添加边框
          scroll={{ x: 1500 }} 让表格可以滚动,水平方向滚动. 1500是滚动区域
      */}
      <Table
        style={{ marginTop: 20 }}
        columns={columns}
        dataSource={data}
        bordered
        scroll={{ x: 1500 }}
      />
    </Card>
  )
}
